<template>
  <el-card class="page-card">
    <div>
      <!-- <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select> -->
      <!-- <el-input
            :placeholder="this.value==='1'?'请输入用户账号':'请输入用户昵称'"
            style="width: 300px; margin-right: 20px"
            prefix-icon="el-icon-search"
            :v-model="this.value===accountNumber?accountNumber:form.nickname"
            clearable
            
          ></el-input> -->
      <!-- <template v-if="value === '1'"> -->
      <template>
        <el-input
          placeholder="请输入用户账号"
          key="accountNumber-input"
          style="width: 300px; margin-right: 20px"
          prefix-icon="el-icon-search"
          v-model="accountNumber"
          clearable
          class="input-box"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="accountNumberSearch"
          class="button-style"
          >搜索</el-button
        >
      </template>
      <!-- <template v-else>
          <el-input
            placeholder="请输入用户昵称"
            key="form.nickname-input"
            style="width: 300px; margin-right: 20px"
            prefix-icon="el-icon-search"
            v-model="form.nickname"
            clearable
          
          ></el-input>
        
    
      <el-button type="primary" icon="el-icon-search" @click="nicknameSearch"
        >搜索</el-button
      >
      </template> -->
    </div>
    <div>
      <el-table
        :data="list"
        style="width: 100%"
        ref="form"
        :model="form"
        border
      >
        <el-table-column prop="userId" label="用户ID" width="200">
        </el-table-column>
        <el-table-column prop="accountNumber" label="用户帐号" width="200">
        </el-table-column>
        <el-table-column prop="nickname" label="用户昵称" width="200">
        </el-table-column>
        <el-table-column prop="days" label="用户打卡天数" width="150">
        </el-table-column>
        <el-table-column prop="email" label="用户邮箱" width="200">
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="showInformation(scope.$index, scope.row)"
              >信息编辑
            </el-button>

            <el-button size="mini" @click="dialogFormVisible2 = true">
              修改密码
            </el-button>

            <!-- 修改密码弹窗>-->
            <el-dialog title="密码修改" :visible.sync="dialogFormVisible2">
              <el-form :model="form">
                <el-form-item label="密码修改" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.password"
                    autocomplete="off"
                    placeholder="请输入新的用户密码"
                  ></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                <el-button
                  type="primary"
                  @click="(dialogFormVisible2 = false), (innerVisible = true)"
                  >确 定</el-button
                >
              </div>
              <el-dialog
                width="30%"
                title="确认修改?"
                :visible.sync="innerVisible"
                append-to-body
              >
                <div slot="footer" class="dialog-footer">
                  <el-button
                    @click="(innerVisible = false), (dialogFormVisible2 = true)"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="updatePassword"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
            </el-dialog>

            <!-- 昵称修改弹窗 -->
            <el-dialog title="信息修改" :visible.sync="dialogFormVisible">
              <el-form :model="form" ref="form" :rules="rules">
                <el-form-item label="昵称修改" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.nickname"
                    placeholder="请输入新的用户昵称"
                  ></el-input>
                </el-form-item>
              </el-form>
              <!-- <span>{{ form.nickname }}</span> -->

              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button
                  type="primary"
                  @click="(dialogFormVisible = false), (innerVisible = true)"
                  >确 定</el-button
                >
              </div>
              <el-dialog
                width="30%"
                title="确认修改?"
                :visible.sync="innerVisible"
                append-to-body
              >
                <div slot="footer" class="dialog-footer">
                  <el-button
                    @click="(innerVisible = false), (dialogFormVisible = true)"
                    >取 消</el-button
                  >
                  <el-button type="primary" @click="updateInfo"
                    >确 定</el-button
                  >
                </div>
              </el-dialog>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
import Common from "../utils/Common.vue";

export default {
  data() {
    return {
      accountNumber: "",
      userId: "",
      list: [
        //  {
        //   userId: "222",
        //     accountNumber: "3333333",
        //     nickname: "hhhh",
        //     days: "12",
        //     email: "7890967890@78.com"
        //  },
      ],
      options: [
        {
          value: "1",
          label: "用户账号",
        },
        {
          value: "2",
          label: "用户昵称",
        },
      ],
      value: "",
      form: {
        nickname: "",
        password: "",
      },

      rules: {
        nickname: [
          { required: true, message: "请输入用户昵称", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入用户密码", trigger: "blur" },
        ],
      },
      dialogFormVisible: false,
      innerVisible: false,
      newNickname: "",
      newPassword: "",
      dialogFormVisible2: false,
      formLabelWidth: "120px",
    };
  },
  mounted() {
    // this.initPage();
  },
  methods: {
    searchChange() {
      if (this.options.value == 1) {
        searchInput.placeholder = "请输入用户账号";
      }
    },
    //更新密码
    updatePassword() {
      console.log("进入更新函数");
      console.log(this.form.password);
      console.log(this.accountNumber);
      this.innerVisible = false;
      this.dialogFormVisible2 = false;
      // this.$refs.form.password.validate((valid) => {
      //   if (valid) {
      //输入的判断
      // var reg_passward = /^[a-zA-Z0-9]{6,16}$/; //密码由英文字母和数字组成的6-16位字符
      // if (reg_passward.test(this.form.password) == false) {
      //   this.$message({
      //     message: "密码格式错误。",
      //     type: "error",
      //   });
      // }
      // console.log(this.form.password)
      // console.log(this.accountNumber)
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded", // 一定要设置这个头
        },
        method: "PUT",
        url: Common.base_url + "/admins/users/password",
        data: this.$qs.stringify({
          // 一定要使用这个 stringify 方法！！！
          accountNumber: this.accountNumber,
          newPassword: this.form.password,
        }),
      })
        .then((res) => {
          // 请求成功，代表与服务器建立连接
          // onsole.log(res.data);
          console.log("请求成功！");
          // if (res.data.resultCode == 200 && res.data.message == "SUCCESS") {
          console.log("修改成功");
          //谈出提示
          console.log(this.form.password);
          console.log(this.accountNumber);
          this.$message({
            message: "修改成功。",
            type: "success",
          });
          // } else {
          //   // 发送失败，弹出提示
          //   console.log("修改");
          //   this.$message({
          //     message: "修改失败。",
          //     type: "error",
          //   });
          // }
        })
        .catch((error) => {
          console.log(error);
          console.log(this.form.password);
          console.log(this.accountNumber);
          console.log("失败");
        });
      // } else {
      //   console.log("error submit!!");
      //   this.$message({
      //     message: "密码不能为空。",
      //     type: "error",
      //   });
      //}
      //});
    },
    //更新用户信息
    updateInfo() {
      //输入的判断
      // if (form.nickname.length > 10) {
      //   this.$message({
      //     message: "昵称长度不超过10个字符",
      //     type: "error",
      //   });
      // } else if (form.nickname.length <= 0) {
      //   this.$message({
      //     message: "昵称不能为空",
      //     type: "error",
      //   });
      // } else {
      //////
      this.innerVisible = false;
      console.log("进入更新函数");
      console.log(this.form.nickname);
      console.log(this.form.userId);
      console.log(this.list[0].nickname);

      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded", // 一定要设置这个头
        },
        method: "PUT",
        url: Common.base_url + "/admins/users/profiles",
        data: this.$qs.stringify({
          // 一定要使用这个 stringify 方法！！！
          newNickname: this.form.nickname,
          userId: this.form.userId,
        }),
      })
        .then((res) => {
          // 请求成功，代表与服务器建立连接
          console.log(res.data);
          // row.nickname = form.nickname;
          this.list[0].nickname = this.form.nickname;
          // console.log(this.row.nickname);
          console.log("请求成功！");
          this.$message({
            message: "修改成功。",
            type: "success",
          });
        })
        .catch((res) => {
          console.log("连接失败");
          console.log(res);
          this.$message({
            message: "连接服务器失败。",
            type: "error",
          });
        });
    },

    //弹出框中展示用户信息

    showInformation(index, row) {
      this.dialogFormVisible = true;
      // this.form=row;
      Object.assign(this.form, row);
      // console.log(index, row); //成功获取信息
      console.log(row);
      console.log(this.form);
    },
    // initPage(){
    //   axios.get('/admins/users')
    //   .then(function (response) {
    //     console.log(response);
    //     this.list=response;
    //   })
    //   .catch(function (error) {
    //     console.log(error);
    //   });
    // }
    //获取搜索的用户信息
    accountNumberSearch() {
      ///    //输入的判断

      this.$axios({
        // headers: {
        //   "Content-Type": "application/x-www-form-urlencoded",  // 一定要设置这个头
        // },
        method: "GET",
        url: Common.base_url + "/admins/users/" + this.accountNumber,
      })
        .then((response) => {
          // console.log(response.data.data);
          // console.log([response.data.data]);
          console.log("获取数据成功");

          this.list = [response.data.data];
        })
        .catch((error) => {
          console.log(error);
          console.log("数据获取失败");
        });
    },
    nicknameSearch() {
      ///    //输入的判断

      this.$axios({
        // headers: {
        //   "Content-Type": "application/x-www-form-urlencoded",  // 一定要设置这个头
        // },
        method: "GET",
        url: Common.base_url + "/admins/users/" + this.accountNumber,
      })
        .then((response) => {
          // console.log(response.data.data);
          // console.log([response.data.data]);
          console.log("获取数据成功");

          this.list = [response.data.data];
        })
        .catch((error) => {
          console.log(error);
          console.log("数据获取失败");
        });
    },
  },
  //},
};
</script>

<style>
.page-card {
  box-shadow: 0 0 25px #b8b9bb;
  height: 618px;
  border-radius: 25px;
  /* background-color: rgb(252, 248, 196); */
}
.input-box {
  width: 300px;
  /* border-radius:30px; */
  padding-bottom: 10px;
  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) */
}
.button-style {
  color: #b8b8b8;
  background-color: #ceffef;
   border: white;
}
</style>